<template>
  <div>
    <van-nav-bar
      
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div style="width: 90%; margin: 0 auto; position: relative; top: 0px;">
      <div style="height: 40px; line-height: 40px; font-size: 25px; text-align: center;">欢迎登录爱尚</div>

      <van-field v-model="username" clearable label="用户名:" placeholder="请输入用户名" style="margin-top: 15px;" />

      <van-field v-model="pwd" clearable type="password" label="密码:" placeholder="请输入密码" style="margin-top: 10px;" />

      <van-checkbox v-model="checked" shape="square" style="margin-top: 20px;">我已阅读并同意《爱尚用户协议》</van-checkbox>

      <van-button @click="onClick()" type="primary" block style="border-radius: 5px; color: black; background-color: #ffdd00; border-color: #ffdd00; width: 80%; margin: 0 auto; margin-top: 20px; ">
        登录
      </van-button>

      <div style="text-align: center; margin-top: 10px;">
        <van-button type="primary" size="small" 
                    style="background-color: white; 
                    border-color: white; color: brown;font-size: 16px;"
                    to="/userRegister">
          注册
        </van-button>
      </div>
      
      <!-- 登录弹出层 -->
      <van-dialog class="fixed-dialog" v-model="show" title="美团用户协议" @confirm="onConfirm()">
        <van-cell-group inset class="refund">
          <van-cell>
            一、总则 美团用户协议（以下简称“本协议”）是用户（以下简称“您”或“用户”）与美团网（包括但不限于美团点评网、美团外卖网、美团酒店网、美团旅游网等，以下简称“美团”）之间关于使用美团提供的服务所订立的协议。本协议描述美团与用户之间关于服务的权利义务。“用户”是指注册、登录、使用美团服务的个人或法人实体。

            二、协议的接受和修改

            用户在使用美团服务前应仔细阅读本协议，用户通过点击同意或使用美团服务，即表示用户同意接受本协议的全部条款。
            美团有权根据需要不时地制定、修改本协议及/或各类规则，并在美团网上公示，不再单独通知用户。用户应不时地注意本协议及/或各类规则的变更，若用户不同意相关变更，应立即停止使用美团服务。用户继续使用美团服务的行为将被视为用户对修改后的协议及/或规则的接受。
            除非另有明确规定，任何增加或加强美团服务的新功能，包括但不限于推出新的产品、新的服务、新的功能等，均受到本协议的约束。
            三、用户注册和账号管理

            用户在使用美团服务前需要注册一个美团账号。用户应提供真实、准确、完整的个人或企业信息，并及时更新个人或企业资料。如果美团有合理理由怀疑用户提供的信息不真实、不准确、不完整或已过时，美团有权暂停或终止用户的账号，并拒绝用户使用美团服务的部分或全部功能。
            用户注册成功后，将获得一个账号和密码。用户应妥善保管账号和密码，对于通过用户账号和密码进行的一切活动负有责任。用户应立即通知美团发现任何未经授权使用用户账号和密码的情况。
            用户可以通过注销账号的方式，将账号从美团注销。注销账号后，用户将不能再登录或使用该账号，但美团仍保留用户的相关信息，包括但不限于用户的订单信息、评价信息等。
            四、用户行为规范

            用户在使用美团服务过程中应遵守相关法律法规，不得利用美团服务从事违法违规行为，包括但不限于： a. 发布、传播、储存违法、违规、淫秽、恶意、侵权等信息； b. 利用美团服务进行欺诈、虚假交易等行为； c. 侵犯他人的知识产权、商业机密等合法权益； d. 传播病毒、木马等恶意软件； e. 进行任何可能影响美团服务正常运营的行为。
            用户不得利用美团服务干扰、破坏、侵入美团的正常运营，包括但不限于： a. 未经美团授权，对美团系统进行任何形式的测试、扫描、攻击等行为； b. 通过非法手段获取美团系统的数据、信息等； c. 干扰、破坏美团的服务器、网络等； d. 利用美团服务进行网络攻击、侵入他人系统等行为。
            用户在使用美团服务过程中应遵守美团的规则和公告，不得违反美团的规定，包括但不限于： a. 不得发布虚假、误导性、不当的信息； b. 不得利用美团服务从事营销、广告等商业行为，除非经美团授权； c. 不得干扰、破坏美团的评价、投诉、仲裁等功能； d. 不得利用美团服务从事其他违反美团规定的行为。
            五、服务的变更、中断和终止

            美团有权根据实际情况变更、中断、终止美团服务的部分或全部功能，包括但不限于： a. 根据法律法规的要求，对美团服务进行调整或关闭； b. 美团的系统发生故障，需要进行维护或修复； c. 美团认为用户的行为违反了本协议或美团的规定； d. 其他美团认为需要变更、中断、终止美团服务的情况。
            美团在变更、中断、终止美团服务时，应尽量提前通知用户，并在合理范围内进行补偿或退款。
            六、责任限制

            用户在使用美团服务时应自行承担风险，美团不对用户的行为和结果承担责任。
            美团不对以下情况导致的损失承担责任： a. 用户在使用美团服务时未按照本协议和美团的规定操作导致的损失； b. 用户在使用美团服务时未及时更新个人或企业资料导致的损失； c. 用户通过美团服务与其他用户进行交易导致的损失； d. 美团根据用户的指令进行操作导致的损失； e. 美团根据法律法规的要求进行操作导致的损失； f. 其他非美团的原因导致的损失。
            美团不对用户因不可抗力或其他不可控因素导致的损失承担责任，包括但不限于：自然灾害、战争、恐怖活动、政府行为、黑客攻击等。
            七、知识产权

            美团享有美团服务的相关知识产权，包括但不限于美团网站上的文字、图片、音频、视频等。
            用户在使用美团服务过程中产生的知识产权归属用户或原始权利人，用户在此授予美团一项全球范围内、免费、不可撤销的许可，许可美团使用、复制、修改、发布、传播用户产生的知识产权，用于美团服务的推广、宣传等目的。
            八、其他

            本协议的成立、生效、履行和解释及争议的解决均适用中华人民共和国法律。
            如用户与美团之间发生争议，应友好协商解决，协三、用户注册和账号管理

            用户在使用美团服务前需要注册一个美团账号。用户应提供真实、准确、完整的个人或企业信息，并及时更新个人或企业资料。如果美团有合理理由怀疑用户提供的信息不真实、不准确、不完整或已过时，美团有权暂停或终止用户的账号，并拒绝用户使用美团服务的部分或全部功能。
            用户注册成功后，将获得一个账号和密码。用户应妥善保管账号和密码，对于通过用户账号和密码进行的一切活动负有责任。用户应立即通知美团发现任何未经授权使用用户账号和密码的情况。
            用户可以通过注销账号的方式，将账号从美团注销。注销账号后，用户将不能再登录或使用该账号，但美团仍保留用户的相关信息，包括但不限于用户的订单信息、评价信息等。
            四、用户行为规范

            用户在使用美团服务过程中应遵守相关法律法规，不得利用美团服务从事违法违规行为，包括但不限于： a. 发布、传播、储存违法、违规、淫秽、恶意、侵权等信息； b. 利用美团服务进行欺诈、虚假交易等行为； c. 侵犯他人的知识产权、商业机密等合法权益； d. 传播病毒、木马等恶意软件； e. 进行任何可能影响美团服务正常运营的行为。
            用户不得利用美团服务干扰、破坏、侵入美团的正常运营，包括但不限于： a. 未经美团授权，对美团系统进行任何形式的测试、扫描、攻击等行为； b. 通过非法手段获取美团系统的数据、信息等； c. 干扰、破坏美团的服务器、网络等； d. 利用美团服务进行网络攻击、侵入他人系统等行为。
            用户在使用美团服务过程中应遵守美团的规则和公告，不得违反美团的规定，包括但不限于： a. 不得发布虚假、误导性、不当的信息； b. 不得利用美团服务从事营销、广告等商业行为，除非经美团授权； c. 不得干扰、破坏美团的评价、投诉、仲裁等功能； d. 不得利用美团服务从事其他违反美团规定的行为。
          </van-cell>
        </van-cell-group>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  
  name: 'UserLogin',
  data(){
    return{
      checked: false,
      show: false,
      username:"",
      pwd:""
    };
  },
  methods:{
    onClickLeft() {
      this.$router.push({path:'/Mine'})
    },
    onClick(){
      if(!this.checked==true){
        this.show = true;
      }
      else{
        axios.post('http://localhost:9090/api/login',{
          userName:this.username,
          pwd:this.pwd
        }) 
        .then(res => {    
          // 登录成功，则把 token 字符串，存储到浏览器本地储存中
          localStorage.setItem("token",res.data.data)
          // 后退一步
          this.$router.push({path:'/Mine'})
          
          // 用于是否登录成功
          this.$store.state.isLogin = true
        })        
        .catch(err => {            
            console.log(err.data)        
        }) 
      }
    },
    onConfirm(){
          this.checked = true;
    },
  },
  
}
</script>
  
<style scoped>
*{
  margin: 0;
  padding: 0;
}
.van-field__label{
  text-align: center;
}
.fixed-dialog{
  width: 320px; /* 设置宽度 */
  height: 460px; /* 设置高度 */
  max-height: 460px; /* 设置最大高度 */
  overflow-y: auto; /* 设置垂直滚动 */
}
</style>
